<template>
    <div class="card">
        <a @click="clickHref(href)" class="link" href="javascript:void(0);">
            <div class="card_title">
                <slot name="title">
                    <div>卡片</div>
                </slot>
            </div>
            <div class="card_body">
                <slot name="body">
                    <div>body</div>
                </slot>
            </div>
        </a>
    </div>
</template>
<script>
export default {
    props:{
        href:{
            type:String,
            default:"javascript:;"
        }
    },
    methods:{
       clickHref(url){
           window.location.href=url;
       }
    }
}
</script>
<style lang="less" scoped>
   .card{
       width:100%;
       display: flex;
       flex-direction: column;
       margin:auto;
       overflow: hidden;
       .link{
           color:#222
       }
       .card_title{
           min-height:85px;
           display: flex;
           align-items:center;
           background:#fafafa;
           padding:15px;
           position: relative;
           border-radius:4Px 4Px 0px 0px;
           font-size:26px;
           color:#222;
           justify-content: space-between;
           letter-spacing:2px;
           overflow: hidden;
           word-break: break-all;
           white-space: normal;
       }
    //    .card_title::after{
    //        width:200%;
    //        height:200%;
    //        border-bottom:solid 1px #ccc;
    //        content:"";
    //        transform: scale(0.5) translateY(-1PX);
    //        position:absolute;
    //            left:-50%;
    //            top:-50%;
    //     //   transform-origin:center left;
    //    }
       .card_body{
           background:#fff;
           padding:10px;
           border-radius:0px 0px 4PX 4Px;
       }
   }
</style>